<template>
    <div>
        <el-collapse-item :title="`- ${pageTitle}`" :name="props.id">
            <!-- 线段或者曲线 -->
            <ul class="editorformTable" v-if="plottingType == 'segment' || plottingType == 'curve'">
                <li class="editorformItem">
                    <div class="editorformItemName">线宽</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.width" @input="change('width', style.width)" class="editorforminput" :step="1" conliols-position="right" :min="1" />
                    </div>
                </li>
                <!-- <li class="editorformItem">
                    <div class="editorformItemName">是否填充</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.fill" @change="change('fill')" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li> -->
                <fillmaterial :graphic="props.graphic" type="1"></fillmaterial>
            </ul>
            <!-- 管道 -->
            <ul class="editorformTable" v-if="plottingType == 'pipeline'">
                <fillmaterial :graphic="props.graphic" :outline="false" type="2"></fillmaterial>
                <li class="editorformItem">
                    <div class="editorformItemName">颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="change('color', style.color)" show-alpha class="editorforminput" v-model="style.color" />
                    </div>
                </li>
            </ul>
            <!-- 走廊 -->
            <ul class="editorformTable" v-if="plottingType == 'corridor'">
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">高程</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.height" @input="change('height', style.height)" class="editorforminput" :step="1" conliols-position="right" :min="0" />
                    </div>
                </li>
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">立体高度</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.diffHeight" @input="change('diffHeight', style.diffHeight)" class="editorforminput" :step="1" conliols-position="right" :min="0" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">走廊宽度</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.width" @input="change('width', style.width)" class="editorforminput" :step="1" conliols-position="right" :min="1" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">纯色填充</div>
                    <div class="editorformItemFunc">
                        <el-color-picker v-model="style.color" @change="change('color', style.color)" show-alpha class="editorforminput" :predefine="defaultColor" />
                    </div>
                </li>

                <border :graphic="props.graphic" v-if="!style.clampToGround"></border>
                <!-- <fillmaterial :graphic="props.graphic" :fill="false" :outline="true"></fillmaterial> -->
                <!-- <li class="editorformItem">
                    <div class="editorformItemName">是否边框</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.outline" @change="change('outline')" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.outline">
                    <div class="editorformItemName">边框颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker
                            :predefine="defaultColor"
                            @change="change('defaultColor')"
                            show-alpha
                            class="editorforminput"
                            v-model="style.outlineColor"
                        />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.outline">
                    <div class="editorformItemName">边框宽度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.outlineWidth"
                            @input="change('outlineWidth')"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="1"
                        />
                    </div>
                </li> -->
            </ul>
            <!-- 围栏 -->
            <ul class="editorformTable" v-if="plottingType == 'rail'">
                <li class="editorformItem">
                    <div class="editorformItemName">墙高</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.diffHeight" @input="change('diffHeight', style.diffHeight)" class="editorforminput" :step="1" conliols-position="right" :min="1" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否填充</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.fill" @change="change('fill', style.fill)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <fillmaterial :graphic="props.graphic" type="3"></fillmaterial>
                <li class="editorformItem">
                    <div class="editorformItemName">是否闭合</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.closure" @change="change('closure', style.closure)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <border :graphic="props.graphic"></border>
                <!-- <li class="editorformItem">
                    <div class="editorformItemName">是否边框</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.outline" @change="change('outline', style.height)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.outline">
                    <div class="editorformItemName">边框颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker
                            :predefine="defaultColor"
                            @change="change('defaultColor', style.height)"
                            show-alpha
                            class="editorforminput"
                            v-model="style.outlineColor"
                        />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.outline">
                    <div class="editorformItemName">边框宽度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.outlineWidth"
                            @input="change('outlineWidth', style.height)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="1"
                        />
                    </div>
                </li> -->
            </ul>
            <!-- 道路 -->
            <ul class="editorformTable" v-if="plottingType == 'road'">
                <li class="editorformItem">
                    <div class="editorformItemName">宽度</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.width" @input="change('width', style.width)" class="editorforminput" :step="1" conliols-position="right" :min="1" />
                    </div>
                </li>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import fillmaterial from "../fillmaterial/fillmaterial.vue";
import border from "../fillmaterial/border.vue";
import { defaultColor } from "@/config/config";
interface Props {
    id?: any; // 默认值
    graphic?: any;
    texture?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    texture: false,
    id: "",
});
const style: any = reactive(props.graphic.style);
const plottingType: any = ref(props.graphic.options.plottingType);
let pageTitle: any = ref("");
const change = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            case "width":
                props.graphic.setStyle({ width: val });
                break;
            case "color":
                props.graphic.setStyle({ color: val });
                break;
            case "height":
                props.graphic.setStyle({ height: val });
                break;
            case "diffHeight":
                props.graphic.setStyle({ diffHeight: val });
                break;
            case "fill":
                props.graphic.setStyle({ fill: val });
                break;
            case "closure":
                props.graphic.setStyle({ closure: val });
                break;
            default:
                props.graphic.setStyle(style);
        }
    }, 100);
};
switch (plottingType.value) {
    case "segment":
        pageTitle.value = "线段的信息";
        break;
    case "curve":
        pageTitle.value = "曲线的信息";
        break;
    case "pipeline":
        pageTitle.value = "管道的信息";
        break;
    case "corridor":
        pageTitle.value = "走廊的信息";
        break;
    case "rail":
        pageTitle.value = "围栏的信息";
        break;
    case "road":
        pageTitle.value = "道路的信息";
        break;
    default:
        console.log(plottingType);
}
</script>
